import React, { useState } from 'react';
import { Button, Modal } from 'antd';
import styles from './index.module.less';
import { contractUnits } from '@/utils/helper';

const UnitModal: any = ({ open, setOpen, units, unit, setUnit }: any) => {
  const [curUnit, setCurUnit] = useState<any>(unit?.value);

  const handleOk = () => {
    setOpen(false);
    setUnit(units.filter((item: any) => curUnit === item?.value)[0]);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  return (
    <>
      <Modal
        className={styles.unitModal}
        title="合约单位设置"
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <div className={`${styles.ulist} flex`}>
          {units.map((item: any) => (
            <div
              className={`${styles.uitem} ${curUnit === item?.value && styles.uitemAct}`}
              onClick={() => setCurUnit(item?.value)}
              key={item?.value}
            >
              {item?.name}
              {item?.desc && <div className={styles.desc}>{item?.desc}</div>}
            </div>
          ))}
        </div>
      </Modal>
    </>
  );
};

export default UnitModal;
